<!DOCTYPE html>
<html>
<head>
    <title>Molecular Beam Apparatus</title>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="450"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2;
        ctx.font = '18px sans-serif';

        // --- Draw Main Apparatus Outline ---
        ctx.beginPath();
        // Start top-left of oven
        ctx.moveTo(50, 150);
        // Top wall of oven
        ctx.lineTo(150, 150);
        // Connection to chamber (upper)
        ctx.lineTo(150, 100);
        // Top wall of chamber
        ctx.lineTo(550, 100);
        // Right wall of chamber
        ctx.lineTo(550, 300);
        // Bottom wall of chamber (right part)
        ctx.lineTo(470, 300);
        // Pump outlet (right side)
        ctx.lineTo(470, 320);
        // Pump outlet (bottom)
        ctx.lineTo(420, 320);
        // Pump outlet (left side)
        ctx.lineTo(420, 300);
        // Bottom wall of chamber (left part)
        ctx.lineTo(150, 300);
        // Connection to chamber (lower)
        ctx.lineTo(150, 250);
        // Bottom wall of oven
        ctx.lineTo(50, 250);
        // Left wall of oven, closing the path
        ctx.closePath();
        ctx.stroke();

        // --- Draw Collimating Slits ---
        ctx.beginPath();
        // Slits are vertical plates with a gap in the middle.
        const slit_y_top = 130;
        const slit_y_bottom = 270;
        const slit_gap_top = 195;
        const slit_gap_bottom = 205;

        // First slit (at x=250)
        ctx.moveTo(250, slit_y_top);
        ctx.lineTo(250, slit_gap_top);
        ctx.moveTo(250, slit_gap_bottom);
        ctx.lineTo(250, slit_y_bottom);

        // Second slit (at x=350)
        ctx.moveTo(350, slit_y_top);
        ctx.lineTo(350, slit_gap_top);
        ctx.moveTo(350, slit_gap_bottom);
        ctx.lineTo(350, slit_y_bottom);
        ctx.stroke();


        // --- Draw Molecular Beam ---
        ctx.beginPath();
        ctx.setLineDash([8, 4]);
        // Upper boundary
        ctx.moveTo(150, 198);
        ctx.lineTo(550, 185);
        // Lower boundary
        ctx.moveTo(150, 202);
        ctx.lineTo(550, 215);
        ctx.stroke();
        // Reset line dash style
        ctx.setLineDash([]);

        // --- Draw Pump Arrow and Label ---
        const pipe_center_x = 445;
        const pipe_bottom_y = 320;

        ctx.beginPath();
        // Arrow
        ctx.moveTo(pipe_center_x, pipe_bottom_y);
        ctx.lineTo(pipe_center_x, pipe_bottom_y + 20); // shaft
        const arrow_y = pipe_bottom_y + 20;
        ctx.moveTo(pipe_center_x, arrow_y);
        ctx.lineTo(pipe_center_x - 6, arrow_y - 8); // head
        ctx.moveTo(pipe_center_x, arrow_y);
        ctx.lineTo(pipe_center_x + 6, arrow_y - 8); // head
        ctx.stroke();

        // --- Add Labels ---
        ctx.textAlign = 'center';
        // Oven label
        ctx.fillText('oven', 100, 205);
        // Collimating slits label
        ctx.fillText('collimating slits', 300, 120);
        // Vacuum label
        ctx.fillText('vacuum', 300, 285);
        // To pump label
        ctx.fillText('to pump', pipe_center_x, arrow_y + 25);
        // Figure caption
        ctx.fillText('Fig. 2.40.', 300, 420);

    </script>
</body>
</html>